<template>
  <div class="full-height page-content content bg-white">
    <yz-condition-filter
      v-model="queryParams"
      @resetSearch="resetSearch"
      @onSubmit="onSubmit"
      class="padding-t-20"
    >
      <yz-input
        v-model.trim="queryParams.number"
        class="q-mr-md"
        :maxlength="20"
        title="备件编号"
      ></yz-input>
      <yz-input
        v-model.trim="queryParams.name"
        class="q-mr-md"
        :maxlength="20"
        title="备件名称"
      ></yz-input>
      <select-tooltip
        v-model="queryParams.category"
        isShowAll
        :multiple="false"
        :options="sparePartOptions"
        msg="备件类别"
      ></select-tooltip>
      <!--      <select-tooltip v-model="queryParams.status"-->
      <!--                      isShowAll-->
      <!--                      :multiple='false'-->
      <!--                      :options="statusOptions"-->
      <!--                      :msg="`${toolData.msg}状态`"></select-tooltip>-->
      <!--      <select-tooltip-->
      <!--        v-model="queryParams.lifeMode"-->
      <!--        isShowAll-->
      <!--        :multiple="false"-->
      <!--        :options="lifeModeOptions"-->
      <!--        :msg="`预警方式`"-->
      <!--      ></select-tooltip>-->
    </yz-condition-filter>
    <div class="form-inline bottom justify-between padding-b-20">
      <div class="left box">
        <q-btn
          class="btn margin-r-10"
          outline
          color="primary"
          :disabled="isDisDelBatch"
          @click="onBatchDelete"
          >批量删除</q-btn
        >
        <!--        <download-btn :url="downloadUrl" :fileName="`${toolData.type}台账(模板).xls`" />-->
        <!--        <upload-btn :url="uploadUrl" @refresh="onSubmit()"/>-->
        <q-btn
          class="btn margin-r-10"
          outline
          color="primary"
          @click="onEdit(null)"
          >新增</q-btn
        >
        <q-btn
          class="btn margin-r-10"
          outline
          :disable="!selected.length"
          color="primary"
          @click="onCutterQrcode"
          >生成二维码</q-btn
        >
      </div>
      <div class="right box flex"></div>
    </div>
    <q-table
      :data="tableData"
      :columns="tableColumns"
      row-key="id"
      class="myTable scroll stick-last-col"
      :loading="isTableLoading"
      :pagination.sync="pagination"
      selection="multiple"
      :selected.sync="selected"
      :hide-bottom="tableData.length > 0"
      no-data-label="暂无数据"
      color="primary"
    >
      <template v-slot:header-cell-createTime="props">
        <q-th
          :props="props"
          class="sortable sorted-icon"
          @click="onSeletByTime"
        >
          {{ props.col.label }}
          <q-icon
            class="q-table__sort-icon"
            :name="
              !queryParams.createTimeAsc
                ? 'arrow_upward'
                : 'iconfont iconjiantoupaixu'
            "
          ></q-icon>
        </q-th>
      </template>
      <!--      <template v-slot:body-cell-stockInOrderNo="props">-->
      <!--        <q-td :props="props">-->
      <!--          <span v-if="props.row.stockInOrderNo === '&#45;&#45;'" class="q-ml-lg">{{props.row.stockInOrderNo}}</span>-->
      <!--          <q-btn flat-->
      <!--                 color="primary"-->
      <!--                 v-else-->
      <!--                 @click="onStockInDetail(props.row)">{{props.row.stockInOrderNo}}</q-btn>-->
      <!--        </q-td>-->
      <!--      </template>-->
      <!--      <template v-slot:body-cell-status="props">-->
      <!--        <q-td :props="props">-->
      <!--          <set-color :class="props.row.status === 4 ? 'color-b' : ''"-->
      <!--                     :options="$getEnum(Enums.CUTTER_TYPE_STATUS)"-->
      <!--                     :colorType="props.row.status"-->
      <!--                     @click.native="onScrapDetail(props.row)"/>-->
      <!--        </q-td>-->
      <!--      </template>-->
      <template v-slot:body-cell-isBinding="props">
        <!-- 是否绑定 -->
        <q-td :props="props">
          <div>{{ props.row.isBinding ? "是" : "否" }}</div>
        </q-td>
      </template>
      <template v-slot:body-cell-lifeMode="props">
        <!-- 预警方式 -->
        <q-td :props="props">
          {{
            props.row.lifeMode
              ? $getEnum(Enums.MODE_LIFE_TYPE, props.row.lifeMode).desc
              : "--"
          }}
        </q-td>
      </template>
      <!--      <template v-slot:body-cell-remaining="props">-->
      <!--        <q-td :props="props">-->
      <!--          <div :style="{color: (props.row.isRed && props.row.lifeMode !== 2) ? 'red' : '#000'}">{{ props.row.remaining }}</div>-->
      <!--        </q-td>-->
      <!--      </template>-->
      <template v-slot:body-cell-createTime="props">
        <q-td>
          {{ props.row.createTime | toTime }}
        </q-td>
      </template>
      <template v-slot:body-cell-operations="props">
        <q-td class="operations" style="width: 100px">
          <div class="btn-group text-center">
            <table-btn btnType="edit" @click="onEdit(props.row)" />
            <table-btn
              btnType="delete"
              @click="onDelete(props.row.id)"
              :tips="`是否确认删除此类备件吗?`"
            />
          </div>
        </q-td>
      </template>
    </q-table>
    <yz-pagination v-model="pagination" @onSearch="getList" />

    <add-edit-dialog
      ref="addEditDialog"
      :sparePartOptions="sparePartOptions"
      :toolUnitOptions="toolUnitOptions"
      :is-edit="isEdit"
      @onRefresh="getList"
    />
    <!-- 二维码 -->
    <tool-account-qrcode
      ref="qrCode"
      :show="isShowQrcodeDialog"
      @close="
        onRefresh;
        isShowQrcodeDialog = false;
      "
      :selectOption="qrcodeList"
      style="line-height: 1px"
    />
  </div>
</template>

<script>
import PAGEMIXIN from 'src/components/basic-mixins/page-mixin'
import toolAccountQrcode from './common/tool-account-qrcode'
import addEditDialog from './common/add-edit-dialog'
import _ from 'lodash'
import { downloadToolCode, uploadToolCode } from 'src/boot/tool/tool-code'
import { getMapByGroup } from 'src/boot/tool/dictionary'
import { getPartsList, partsDeleteBatch } from 'src/boot/spare/parts'
export default {
  name: 'spare-parts',
  mixins: [PAGEMIXIN],
  props: {
    goodsCategoryCode: [Number, String],
    toolData: {
      type: Object,
      default: () => {
        return {
          msg: '备件',
          value: 2
        }
      }
    }
  },
  data () {
    return {
      downloadUrl: downloadToolCode, // 下载模板地址
      uploadUrl: uploadToolCode, // 上传模板地址
      mixinViewModuleOptions: {
        getDataListURL: getPartsList, // 数据列表接口，API地址
        deleteURL: partsDeleteBatch, // 删除接口，API地址
        deleteIsBatchURL: partsDeleteBatch, // 删除接口，是否需要批量？
        deleteIsBatchKey: 'id', // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
        isSetData: false, // 获取的数据是否进去处理 func => setData
        isChangeData: true // 请求数据是否进去处理 func => changeData
      },
      queryParams: {
        category: 'all',
        createTimeAsc: false
      },
      newColumns: {
        number: '备件编号',
        name: '备件名称',
        categoryName: '所属分类',
        spec: '规格',
        unitName: '单位',
        useTo: '用途',
        brand: '品牌',
        price: '单价（元）',
        higherLimit: '库存上限',
        lowerLimit: '库存下限',
        remark: '备注',
        createName: '创建人',
        createTime: '创建时间',
        operations: '操作'
      },
      sparePartOptions: [],
      toolTypeSOptions: [],
      toolUnitOptions: [],
      isEdit: false,
      isShowQrcodeDialog: false,
      isShowScrapDetailDialog: false,
      isShowScrapDialog: false,
      isShowToolExtendDialog: false,
      scrapDetail: {}, // 报废信息
      qrcodeList: [], // 二维码数据
      rightRowList: {},
      cloneTableData: [],
      tableData: []
    }
  },
  components: {
    toolAccountQrcode,
    addEditDialog
  },
  computed: {
    statusOptions () {
      return this.$getEnum(this.Enums.CUTTER_TYPE_STATUS)
    },
    isDisDelBatch () {
      return !this.selected.length
    },
    lifeModeOptions () {
      return this.$getEnum(this.Enums.MODE_LIFE_TYPE)
    }
  },
  methods: {
    changeData (val) {
      return {
        ...val,
        goodsCategoryCode: this.goodsCategoryCode
      }
    },
    onEdit (row) {
      this.isEdit = !_.isNil(row)
      console.log(this.cloneTableData)
      console.log(row)
      const member = this.cloneTableData.find(v => v.id === row?.id)
      console.log(member)
      this.$refs.addEditDialog.initDialog(member, false)
    },
    // 生成二维码
    onCutterQrcode () {
      console.log(this.selected)
      this.qrcodeList = this.selected
      this.isShowQrcodeDialog = true
    },
    getMapByGroup () {
      getMapByGroup().then(res => {
        this.sparePartOptions = res.sparePartOptions || []
        this.toolUnitOptions = res.spareUnitOptions || []
        this.toolTypeSOptions = res.toolTypeSOptions || []
      })
    }
  },
  mounted () {
    this.getMapByGroup()
    this.onSubmit()
  }
}
</script>
<style lang="scss" scoped>
.fix-detail {
  >>> .form-inline .q-field__inner {
    width: 200px;
  }
}
.color-b {
  color: #5f77fd;
  cursor: pointer;
}
</style>
